<template>
    <div id="user">
        <el-button type="primary" @click="showAdd" >添加管理员用户</el-button>
        <el-divider></el-divider>
        <el-table
                :data="tableData.rows"
                style="width: 100%"
                max-height="500">

            <el-table-column
                    prop="id"
                    sortable
                    label="编号">
            </el-table-column>

            <el-table-column
                    prop="userName"
                    label="用户名">
            </el-table-column>

            <el-table-column
                    prop="phone"
                    label="手机">
            </el-table-column>

            <el-table-column
                    prop="email"
                    label="邮箱">
            </el-table-column>

            <el-table-column
                    prop="nickName"
                    label="昵称">
            </el-table-column>

            <el-table-column
                    prop="realName"
                    label="姓名">
            </el-table-column>

            <el-table-column
                    prop="sex"
                    label="性别">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.sex" disabled placeholder="性别">
                        <el-option
                                v-for="item in sexDictionary"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    </template>
            </el-table-column>

            <el-table-column
                    prop="gmtCreated"
                    sortable
                    label="创建时间">
            </el-table-column>

            <el-table-column
                    prop="modifier"
                    label="更新者">
            </el-table-column>

            <el-table-column
                    prop="gmtModified"
                    sortable
                    label="更新时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="showEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="showUserRole(scope.row)" type="text" size="small">角色</el-button>
                    <el-button @click="deleteUser(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, prev, pager, next,sizes"
                :page-size="tableData.size"
                :current-page="tableData.current"
                @current-change="requestData"
                @size-change="requestData"
                :total="tableData.total">
        </el-pagination>

        <el-dialog :title="dialogTitle" @close="requestData" :visible.sync="dialogEditVisible">

            <el-form :model="form">

                <el-form-item label="用户id" :label-width="'120px'" v-show="form.id !== null">
                    <el-input v-model="form.id" readonly></el-input>
                </el-form-item>

                <el-form-item label="用户名" :label-width="'120px'">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>

                <el-form-item label="手机号" :label-width="'120px'">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" :label-width="'120px'">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>

                <el-form-item label="昵称" :label-width="'120px'">
                    <el-input v-model="form.nickName"></el-input>
                </el-form-item>

                <el-form-item label="真实姓名" :label-width="'120px'">
                    <el-input v-model="form.realName"></el-input>
                </el-form-item>

                <el-form-item label="性别" :label-width="'120px'">
                    <el-select v-model="form.sex" placeholder="性别">
                        <el-option
                                v-for="item in sexDictionary"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRoEdit">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
            return {

                sexDictionary:[
                    {
                        label: null,
                        value: null
                    }
                ],

                dialogTitle:'',

                adminUserName: "root",

                adminExceptTip: "系统超级管理用户不能操作",

                dialogEditVisible: false,

                form: {
                    id: null,
                    userName: null,
                    phone: null,
                    email: null,
                    nickName: null,
                    realName: null,
                    sex: null
                },

                tableData: {
                    total: null,
                    size: 10,
                    current: 1,
                    rows: [{
                        id: null,
                        userName: null,
                        phone: null,
                        email: null,
                        nickName: null,
                        realName: null,
                        sex: null
                    }]
                }
            }
        },
        methods: {
            async requestData() {
                const resp = await this.$http.post("/sysUser/getPage", this.tableData);
                const data = resp.data;
                if (data.code === 200) {
                    this.tableData = data;
                } else {
                    this.$message.error(data.info);
                }
            },
            async getDictionary() {
                let resp = await this.$http.get("/sysDictionary/getByParentCode?parentCode=sex");
                let data = resp.data;
                if (data.code === 200){
                    this.sexDictionary = data.rows;
                }else {
                    this.$message.error(data.info);
                }
                console.log(data.rows);
                console.log(this.sexDictionary);
            },
            showEdit(row){
                console.log(this.sexDictionary);
                this.dialogTitle = '修改用户信息';
                if (row.userName === this.adminUserName){
                    this.$message.error(this.adminExceptTip);
                    return;
                }
                this.form = row;
                this.dialogEditVisible = true;
            },
            showAdd(){
                this.dialogTitle = '新增用户';
                this.form = {
                    id: null,
                    userName: null,
                    phone: null,
                    email: null,
                    nickName: null,
                    realName: null,
                    sex: null
                };
                this.dialogEditVisible = true;
            },
            async addRoEdit() {
                const resp = this.form.id === null? await this.$http.post("/sysUser/add", this.form) : await this.$http.put("/sysUser/edit", this.form);
                const data = resp.data;
                if (data.code === 200) {
                    this.$message.success(data.info);
                    this.requestData();
                } else {
                    this.$message.error(data.info);
                }
                this.dialogEditVisible = false;
            },
            showUserRole(row){
                if (row.userName === this.adminUserName){
                    this.$message.error(this.adminExceptTip);
                    return;
                }
                this.$router.push({
                    path: "/sysUserRole",
                    query: {
                        id: row.id,
                        userName: row.userName
                    }
                })

            },
            deleteUser(index,row){
                if (row.userName === this.adminUserName){
                    this.$message.error(this.adminExceptTip);
                    return;
                }
                this.$confirm("确定删除？","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/sysUser/delete/"+row.id).then(resp => {
                        const data = resp.data;
                        if (data.code === 200){
                            this.$message.success("删除成功");
                            this.tableData.rows.splice(index,1);
                        }else {
                            this.$message.error(data.info);
                        }
                    })

                }).catch(() => {
                })
            }
        },

        created() {
            this.requestData();
            this.getDictionary();
        }
    }
</script>

<style scoped>

</style>
